<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表统计 - 图书馆座位预约系统</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入基础样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入报表统计页面专用样式 -->
    <link rel="stylesheet" href="css/report-statistics.css">
</head>
<body>
    <div class="main-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-book-open"></i>
                    <span>图书馆管理系统</span>
                </div>
                <button class="close-btn" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <nav class="sidebar-menu">
                <a href="index.html" class="menu-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>系统概览</span>
                </a>
                <a href="seat-management1.html" class="menu-item">
                    <i class="fas fa-chair"></i>
                    <span>座位管理</span>
                </a>
                <a href="booking-management.html" class="menu-item">
                    <i class="fas fa-calendar-alt"></i>
                    <span>预约管理</span>
                </a>
                <a href="user-management1.html" class="menu-item">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
                <a href="data-analysis.html" class="menu-item">
                    <i class="fas fa-chart-line"></i>
                    <span>数据分析</span>
                </a>
                <a href="report-statistics.html" class="menu-item active">
                    <i class="fas fa-file-alt"></i>
                    <span>报表统计</span>
                </a>
                <a href="system-settings.html" class="menu-item">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">管理员</div>
                        <div class="user-role">系统管理员</div>
                    </div>
                </div>
                <button class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <div class="content-container">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1 class="page-title">报表统计</h1>
                </div>
                
                <div class="navbar-right">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    
                    <div class="notification-bell">
                        <i class="fas fa-bell"></i>
                        <span class="notification-count">3</span>
                    </div>
                    
                    <div class="theme-toggle">
                        <i class="fas fa-moon"></i>
                    </div>
                    
                    <div class="user-menu">
                        <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="content">
                <!-- 报表筛选和控制区域 -->
                <div class="report-filters">
                    <div class="filter-controls">
                        <div class="filter-group">
                            <label>报表类型：</label>
                            <select id="reportType">
                                <option value="daily">日报</option>
                                <option value="weekly">周报</option>
                                <option value="monthly" selected>月报</option>
                                <option value="quarterly">季报</option>
                                <option value="yearly">年报</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div class="filter-group custom-date" style="display: none;">
                            <input type="date" id="reportStartDate">
                            <span>至</span>
                            <input type="date" id="reportEndDate">
                        </div>
                        
                        <div class="filter-group">
                            <label>报表内容：</label>
                            <select id="reportContent">
                                <option value="all">全部内容</option>
                                <option value="seats">座位使用情况</option>
                                <option value="bookings">预约统计</option>
                                <option value="users">用户行为</option>
                                <option value="system">系统运行</option>
                            </select>
                        </div>
                        
                        <button class="generate-report-btn">
                            <i class="fas fa-file-alt"></i>
                            生成报表
                        </button>
                        
                        <button class="export-report-btn">
                            <i class="fas fa-download"></i>
                            导出报表
                        </button>
                        
                        <button class="email-report-btn">
                            <i class="fas fa-envelope"></i>
                            发送邮件
                        </button>
                    </div>
                </div>
                
                <!-- 报表概览卡片 -->
                <div class="report-overview">
                    <div class="overview-card">
                        <div class="overview-header">
                            <h3>座位利用率报告</h3>
                            <span class="report-period">2023年10月</span>
                        </div>
                        <div class="overview-content">
                            <div class="overview-stats">
                                <div class="stat-item">
                                    <div class="stat-value">76.2%</div>
                                    <div class="stat-label">平均利用率</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">89.3%</div>
                                    <div class="stat-label">高峰期利用率</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">+2.5%</div>
                                    <div class="stat-label">环比增长</div>
                                </div>
                            </div>
                            <div class="overview-chart">
                                <div class="mini-chart"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="overview-card">
                        <div class="overview-header">
                            <h3>预约统计报告</h3>
                            <span class="report-period">2023年10月</span>
                        </div>
                        <div class="overview-content">
                            <div class="overview-stats">
                                <div class="stat-item">
                                    <div class="stat-value">25,860</div>
                                    <div class="stat-label">总预约次数</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">93.8%</div>
                                    <div class="stat-label">履约率</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">862</div>
                                    <div class="stat-label">日均预约</div>
                                </div>
                            </div>
                            <div class="overview-chart">
                                <div class="mini-chart"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="overview-card">
                        <div class="overview-header">
                            <h3>用户活跃度报告</h3>
                            <span class="report-period">2023年10月</span>
                        </div>
                        <div class="overview-content">
                            <div class="overview-stats">
                                <div class="stat-item">
                                    <div class="stat-value">3,256</div>
                                    <div class="stat-label">活跃用户数</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">4.8次</div>
                                    <div class="stat-label">人均预约</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value">+8.7%</div>
                                    <div class="stat-label">环比增长</div>
                                </div>
                            </div>
                            <div class="overview-chart">
                                <div class="mini-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细报表区域 -->
                <div class="detailed-reports">
                    <!-- 座位使用详情报表 -->
                    <div class="report-card">
                        <div class="report-card-header">
                            <h3>座位使用详情报表</h3>
                            <div class="report-actions">
                                <button class="view-details">查看详情</button>
                                <button class="export-table">导出</button>
                            </div>
                        </div>
                        <div class="report-card-body">
                            <div class="report-summary">
                                <p>本报表统计了2023年10月各楼层座位使用情况，包括使用率、预约量和平均使用时长等关键指标。</p>
                            </div>
                            <div class="report-content">
                                <table class="report-table">
                                    <thead>
                                        <tr>
                                            <th>楼层</th>
                                            <th>区域数</th>
                                            <th>座位数</th>
                                            <th>总预约次数</th>
                                            <th>使用率</th>
                                            <th>平均使用时长</th>
                                            <th>高峰时段</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1楼</td>
                                            <td>4</td>
                                            <td>320</td>
                                            <td>8,952</td>
                                            <td>89.6%</td>
                                            <td>3.2小时</td>
                                            <td>14:00-17:00</td>
                                        </tr>
                                        <tr>
                                            <td>2楼</td>
                                            <td>5</td>
                                            <td>380</td>
                                            <td>7,856</td>
                                            <td>76.3%</td>
                                            <td>2.8小时</td>
                                            <td>10:00-12:00</td>
                                        </tr>
                                        <tr>
                                            <td>3楼</td>
                                            <td>4</td>
                                            <td>350</td>
                                            <td>6,543</td>
                                            <td>68.9%</td>
                                            <td>2.5小时</td>
                                            <td>16:00-18:00</td>
                                        </tr>
                                        <tr>
                                            <td>4楼</td>
                                            <td>3</td>
                                            <td>206</td>
                                            <td>3,254</td>
                                            <td>59.4%</td>
                                            <td>2.1小时</td>
                                            <td>09:00-11:00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 预约统计详情报表 -->
                    <div class="report-card">
                        <div class="report-card-header">
                            <h3>预约统计详情报表</h3>
                            <div class="report-actions">
                                <button class="view-details">查看详情</button>
                                <button class="export-table">导出</button>
                            </div>
                        </div>
                        <div class="report-card-body">
                            <div class="report-summary">
                                <p>本报表统计了2023年10月预约相关数据，包括预约成功率、履约率、取消率等关键指标。</p>
                            </div>
                            <div class="report-content">
                                <table class="report-table">
                                    <thead>
                                        <tr>
                                            <th>时间段</th>
                                            <th>总预约数</th>
                                            <th>成功预约数</th>
                                            <th>履约数</th>
                                            <th>取消数</th>
                                            <th>成功率</th>
                                            <th>履约率</th>
                                            <th>取消率</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>工作日</td>
                                            <td>18,234</td>
                                            <td>17,856</td>
                                            <td>16,754</td>
                                            <td>1,480</td>
                                            <td>97.9%</td>
                                            <td>94.3%</td>
                                            <td>5.7%</td>
                                        </tr>
                                        <tr>
                                            <td>周末</td>
                                            <td>7,626</td>
                                            <td>7,521</td>
                                            <td>6,987</td>
                                            <td>639</td>
                                            <td>98.6%</td>
                                            <td>92.9%</td>
                                            <td>7.1%</td>
                                        </tr>
                                        <tr>
                                            <td>总计</td>
                                            <td>25,860</td>
                                            <td>25,377</td>
                                            <td>23,741</td>
                                            <td>2,119</td>
                                            <td>98.1%</td>
                                            <td>93.8%</td>
                                            <td>6.2%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户行为详情报表 -->
                    <div class="report-card">
                        <div class="report-card-header">
                            <h3>用户行为详情报表</h3>
                            <div class="report-actions">
                                <button class="view-details">查看详情</button>
                                <button class="export-table">导出</button>
                            </div>
                        </div>
                        <div class="report-card-body">
                            <div class="report-summary">
                                <p>本报表统计了2023年10月用户行为数据，包括活跃度分布、预约偏好和使用习惯等关键指标。</p>
                            </div>
                            <div class="report-content">
                                <table class="report-table">
                                    <thead>
                                        <tr>
                                            <th>用户类型</th>
                                            <th>用户数</th>
                                            <th>预约次数</th>
                                            <th>人均预约次数</th>
                                            <th>平均使用时长</th>
                                            <th>活跃度</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>学生</td>
                                            <td>2,856</td>
                                            <td>21,568</td>
                                            <td>7.5</td>
                                            <td>2.9小时</td>
                                            <td>87.2%</td>
                                        </tr>
                                        <tr>
                                            <td>教师</td>
                                            <td>400</td>
                                            <td>4,292</td>
                                            <td>10.7</td>
                                            <td>3.5小时</td>
                                            <td>92.5%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 报表下载历史 -->
                <div class="report-history">
                    <div class="history-header">
                        <h3>报表下载历史</h3>
                        <button class="clear-history">清空历史</button>
                    </div>
                    <div class="history-list">
                        <div class="history-item">
                            <div class="history-info">
                                <div class="history-name">月度座位使用率报表_202310</div>
                                <div class="history-meta">
                                    <span class="history-date">2023-11-01 10:23</span>
                                    <span class="history-size">3.5MB</span>
                                </div>
                            </div>
                            <div class="history-actions">
                                <button class="download-btn">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="delete-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-info">
                                <div class="history-name">预约统计报表_202310</div>
                                <div class="history-meta">
                                    <span class="history-date">2023-11-01 09:15</span>
                                    <span class="history-size">2.8MB</span>
                                </div>
                            </div>
                            <div class="history-actions">
                                <button class="download-btn">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="delete-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-info">
                                <div class="history-name">用户行为分析报表_202310</div>
                                <div class="history-meta">
                                    <span class="history-date">2023-10-31 16:45</span>
                                    <span class="history-size">4.2MB</span>
                                </div>
                            </div>
                            <div class="history-actions">
                                <button class="download-btn">
                                    <i class="fas fa-download"></i>
                                </button>
                                <button class="delete-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 加载动画 -->
    <div class="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载中...</p>
        </div>
    </div>
    
    <!-- 提示框 -->
    <div class="toast" style="display: none;"></div>
    
    <!-- 引入主JavaScript文件 -->
    <script src="js/main.js"></script>
    <!-- 引入报表统计页面专用JavaScript文件 -->
    <script src="js/report-statistics.js"></script>
</body>
</html>